<template>
<el-row>
  <el-form label-width="100px" :model="form" ref="form" :rules="rules" :disabled="show" :class="show ? 'disabled' : ''" size="small">
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="负责人姓名：" prop="leader_name">
        <el-input class="w240" v-model="form.leader_name"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="联系电话：" prop="leader_phone">
        <el-input class="w240" v-model="form.leader_phone" maxlength="11"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件类型：" prop="leader_id_type">
        <el-select class="w240" v-model="form.leader_id_type" placeholder="">
          <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件号码：" prop="leader_id_no">
        <el-input class="w240" v-model="form.leader_id_no"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="证件有效期：" prop="leader_time">
        <el-date-picker class="w240" value-format="yyyy-MM-dd" v-model="form.leader_time" placeholder=""></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <el-form-item label="图片上传：">
        <span class="fz12 err">图片上传大小不超过1M</span>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <label class="el-form-item__label" style="width: 100px;">证件照片：</label>
        
          <el-form-item style="display: inline-block;" label="" label-width="0" prop="leader_id_1" class="mr10">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccFacade">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_1" v-if="form.leader_id_1" alt="">
              <span class="err">*</span>
              <span class="fz12">身份证正面照</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display: inline-block;" label="" label-width="0" class="mr10" prop="leader_id_2">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccNegative">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_2" v-if="form.leader_id_2" alt="">
              <span class="err">*</span>
              <span class="fz12">身份证反面照</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display: inline-block;" label="" label-width="0" class="mr10" prop="leader_id_3">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccLeadHead">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_3" v-if="form.leader_id_3" alt="">
              <span class="err">*</span>
              <span class="fz12">手持身份证照</span>
            </el-upload>
          </el-form-item>
        
    </el-col>
  </el-form>
  <el-col :span="23" :offset="1">
    <el-button v-if="!show" type="primary" size="small" @click="handleClickSubmit" :loading="loading" :disabled="disabled">提交审核</el-button>
    <el-button v-if="!show" type="info" size="small" @click="show = true" >取消编辑</el-button>
    <el-button v-if="show" type="primary" size="small" @click="show = false" >编辑资料</el-button>
  </el-col>
</el-row>
</template>

<script>
import { merchantPrincipalUpdate } from '@/api/shop'
import { mapGetters } from 'vuex'
import { validatePhone, validateIdentity } from '@/utils/validate'

export default {
  data() {
    const validCard = (rule, value, callback) => {
      if (value !== '' && validateIdentity(value)) {
        callback()
      } else {
        callback(new Error('身份证号码格式不对哦~'))
      }
    }
    const validPhone = (rule, value, callback) => {
      if (value !== '' && validatePhone(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式不对哦~'))
      }
    }
    return {
      show: true,
      loading: false,
      disabled: false,
      options: [
        {
          id: 1,
          name: '身份证'
        }
      ],
      form: {
        leader_type: '',
        leader_name: '',
        leader_time: '',
        leader_phone: '',
        leader_id_no: '',
        leader_id_type: '',
        leader_id_1: '',
        leader_id_2: '',
        leader_id_3: ''
      },
      rules: {
        leader_id_type: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        leader_id_1: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_id_2: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_id_3: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        leader_time: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        leader_phone: [{ required: true, trigger: 'blur', validator: validPhone }],
        leader_id_no: [{ required: true, trigger: 'blur', validator: validCard }]
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  props: {
    merchantNum: {
      required: true,
      type: String
    },
    data: {
      required: true,
      type: Object
    },
    contactType: {
      required: true
    }
  },
  computed: {
    merchant_type() {
      return this.$store.state.merchant.merchantType
    },
    contact_type() {
      return this.contactType
    },
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    handleClickSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          merchantPrincipalUpdate(this.merchantNum, this.id, this.form).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('负责人信息资料提交成功，请耐心等待审核~')
              this.loading = false
              this.disabled = true
              this.show = true
              this.$emit('update')
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }
      })
    },
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleUploadSuccLeadHead(file) {
      this.form.leader_id_3 = file.result
    },
    handleUploadSuccFacade(file) {
      this.form.leader_id_1 = file.result
    },
    handleUploadSuccNegative(file) {
      this.form.leader_id_2 = file.result
    }
  },
  watch: {
    contact_type(v, o) {
      this.form.leader_type = ''
    }
  },
  created() {
    this.$nextTick(() => {
      this.form.leader_type = this.data.leader_type
      this.form.leader_id_no = this.data.leader_id_no
      this.form.leader_id_type = this.data.leader_id_type
      this.form.leader_name = this.data.leader_name
      this.form.leader_phone = this.data.leader_phone
      this.form.leader_time = this.data.leader_id_expire
      if (this.data.photo.length !== 0) {
        this.form.leader_id_1 = this.data.photo.leader_id_1[0]
        this.form.leader_id_2 = this.data.photo.leader_id_2[0]
        this.data.photo.hasOwnProperty('leader_id_3') ? this.form.leader_id_3 = this.data.photo.leader_id_3[0] : this.form.leader_id_3 = ''
      }
    })
  }
}
</script>

